<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello React!</title>
    <!--注意导入顺序-->
    <script src="./js/react.16.4.js"></script>
    <script src="./js/react-dom.16.4.js"></script>

    <!--将JSX语法 转换成javascript语法 -->
    <script src=" ./js/babel.min.js"></script>
    <!--<script src="../script/jquery-1.10.min.js"></script>-->
    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
</head>
<body>
<div id="example"></div>

<script type="text/babel">

    let h1style = {
        backgroundColor: "#f40",
        color: "green"
    }

    // todo 组件首字母大写
    // todo 样式 class 要用className
    // todo React 数字不需要带单位
    //todo 参数在this.props 中， this.props 应该是  React.Component 中的对象
    let Welcome = (props) => {
        return <div>Hello {props.name} </div>
    };

    //  todo 包装一层生成多个H1 标签
    function CreateMoreH1() {
        return (
            <div>
                <Welcome name="Sara"/>
                <Welcome name="Cahal"/>
                <Welcome name="Edite"/>
            </div>
        );
    }

    class CreateH1 {
        constructor(num) {
            this.name = num

        }

        Creatediv() {
            return (
                <div>
                    <Welcome name="Sara"/>
                    <Welcome name="Cahal"/>
                    <Welcome name="Edite"/>
                </div>
            );
        }
    }

    // function Abc() {
    //     let p = new CreateH1(3)
    //     return p.Creatediv()
    // }

    class Webshow extends React.Component { // todo 定义组件,继承于 React.Component
        render() {
            return (
                <div style={{backgroundColor: "yellow", borderWidth: 5, borderColor: "black", borderStyle: "solid"}}>
                    <CreateMoreH1/>
                </div>
            )
        }
    }

    class WebLink extends React.Component {
        render() {
            return (
                <a className="btn btn-danger" href={this.props.href}>{this.props.name}</a>
            )
        }
    }

    // todo 组合的时候 外层 div 不能省略
    class WebGroup extends React.Component {
        render() {
            return (
                <div>
                    <Webshow/>,
                    <WebLink {...this.props}/>
                </div>
            );
        }
    }

    let vars = {
        href: "http://wwww.baidu.com",
        name: "百度"
    }

    // let vararrs = [ "http://wwww.baidu.com", "百度"]

    ReactDOM.render(
        // <WebGroup args={vararrs} />, // todo 向下传递参数 ,通过类方式统一传 子组件        <WebLink href={this.props.args.href} name={this.props.args.name}/>
        <WebGroup name={vars.name} href={vars.href}/>,
        document.getElementById("example")
    )


</script>
</body>
<h2>props</h2>
<ul>
    <li>props , this.props 应该是 React.Component 中的对象</li>
    <li>props 设置组件自身属性, 传递信息，不要修改props中的值</li>
</ul>
</html>